<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="orderNumber" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="hosName" placeholder="请选择医院">
            <el-option
              v-for="item in hospitals"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="hosTypeName" placeholder="请选择科室">
            <el-option
              v-for="item in hospitalDepts"
              :key="item.id"
              :label="item.deptname"
              :value="item.deptname"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <template>
          <div class="block">
            <span class="demonstration">下单时间</span>
            <el-date-picker
              v-model="value2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getBookPageList"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="id"
        width="95"
        v-if="show"
      ></el-table-column>
      <el-table-column prop="orderNumber" label="订单号" width="120">
      </el-table-column>
      <el-table-column prop="hosName" label="所属医院" width="120">
      </el-table-column>
      <el-table-column prop="hosTypeName" label="所属科室" width="120">
      </el-table-column>
      <el-table-column prop="bedId" label="床位ID" width="120">
      </el-table-column>
      <el-table-column prop="payMoney" label="实际支付" width="120">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column label="订单状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">异常</span>
          <span v-if="scope.row.orderStatus == 1">已完成</span>
          <span v-if="scope.row.orderStatus == 2">进行中</span>
        </template>
      </el-table-column>
      <el-table-column prop="ordderTime" label="下单时间" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <router-link :to="'/order/orderdetails/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >查看</el-button
            >
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteHotel(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      background
      layout="prev, pager, next,sizes,jumper,->,total"
      :current-page="page"
      :page-size="limit"
      :page-sizes="pagelist"
      :total="total"
      @current-change="currentChagne"
      @size-change="sizeChage"
    >
         
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      url: "http://localhost:8080/jiapei/orders/selectAll1",
      page: 1,
      limit: 5,
      pagelist: [5, 10, 15],
      total: 0,
      id: "",
      orderNumber: "",
      hosName: "",
      hosTypeName: "",
      bedId: "",
      payMoney: "",
      mobile: "",
      orderStatus: "",
      ordderTime: "",
      value2: "",
      hospitals: [],
      hospitalDepts: [],
      checkBoxData:[],
    };
  },
  mounted() {
    this.getBookPageList();
  },
  methods: {
    handleSelectionChange(val) {
      this.checkBoxData = val;
     
      console.log(val);
    },
    getBookPageList() {
      this.$axios({
        method: "GET",
        url: this.url,
        params: {
          page: this.page,
          limit: this.limit,
          id: this.id,
          orderNumber: this.orderNumber,
          hosTypeName: this.hosTypeName,
          hosName: this.hosName,
          bedId: this.bedId,
          payMoney: this.payMoney,
          mobile: this.mobile,
          orderStatus: this.orderStatus,
          ordderTime: this.ordderTime,
          ordderTime1: this.value2[0],
          ordderTime2: this.value2[1],
        },
      }).then((res) => {
        this.list = res.data.data.recordes;
        this.total = res.data.data.total;
        this.hospitals = res.data.data.hospitals;
        // console.log(res.data.data.hospitals);
        this.hospitalDepts = res.data.data.hospitalDepts;
      });
    },
    currentChagne(cp) {
      this.page = cp;
      this.getBookPageList();
    },
    sizeChage(size) {
      this.limit = size;
      this.getBookPageList();
    },
    deleteHotel(row) {
      this.$confirm("你要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.$axios({
          url: `http://localhost:8080/jiapei/orders/orders/${row.id}`,
          method: "GET",
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message("删除成功");
            this.getBookPageList();
          }
        });
      });
    },
  },
};
</script>

<style>
</style>